<template>
  <div>
    <el-container>
      <el-main>
        <h3>登录</h3>
        <div>
          <el-form :model="model" @submit="submitHandler" label-width="80px">
            <el-form-item label="手机号" prop="phoneValue">
              <el-input size="small" v-model="model.phoneValue"></el-input
            ></el-form-item>
            <el-form-item label="密码" prop="pwdValue">
              <el-input
                size="small"
                v-model="model.pwdValue"
                show-password
              ></el-input
            ></el-form-item>
            <!-- <cube-form-item :field="fields[2]"></cube-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="submitHandler"
                >登录</el-button>
              <router-link to="/register" class="reg"> <el-button>注册</el-button></router-link>
              </el-form-item
            >
          </el-form>
          
        </div>
        <!-- <common-footer></common-footer> -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { loginApi } from "@/api/getData.js";
import CommonFooter from "../../components/CommonFooter.vue";
export default {
  components: {
    CommonFooter,
  },
  data() {
    return {
      model: {
        phoneValue: "",
        pwdValue: "",
        // nameValue: "",
      },
      fields: [
        {
          type: "input",
          modelKey: "phoneValue",
          label: "手机号",
          props: {
            placeholder: "请输入手机",
          },
          rules: {
            required: true,
          },
          messages: {
            required: "手机号不能为空",
          },
        },
        {
          type: "input",
          modelKey: "pwdValue",
          label: "密码",
          props: {
            placeholder: "请输入密码",
            type: "password",
            eye: {
              open: false,
            },
          },
          rules: {
            required: true,
          },
          messages: {
            required: "密码不能为空",
          },
        },
      ],
    };
  },
  methods: {
    submitHandler() {
      // e.preventDefault(); //防止默认提交 很常用
      loginApi(this.model.phoneValue, this.model.pwdValue).then((res) => {
        if (res.data.code === 0) {
          console.log(11);
          //跳转到个人中心
          localStorage.setItem("token", res.data.data);
          //vuex-设置全局token
          this.$store.dispatch("setToken", res.data.data);
          const h = this.$createElement;
          this.$message({
            message: h("p", null, [
              h("span", null, "登录成功"),
            ]),
          });

          // const toast = this.$createToast({
          //   txt: "登录成功",
          //   type: "correct",
          //   time: 1500,
          // });
          // toast.show();
          // this.$router.push({ path: "/personal" })
          setTimeout(() => {
            this.$router.push({ path: "/" });
          }, 1000);
        } else {
          const h = this.$createElement;
          this.$message({
            message: h("p", null, [
              h("span", null, "登录失败"),
            ]),
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  padding: 50px 5% 0;
  text-align: center;
}
// 登录
.cube-btn {
  margin-top: 20px;
}
//注册
.reg {
  display: inline-block;
  margin-top: 30px;
  font-size: 18px;
}
</style>